<template v-if='isShow'>
     <el-upload
        class="upload-demo"
        :action="baseUrl+action"
        :multiple='false'
        :limit="limit"
        :file-list="fileList?fileList:[]"
        :on-change="uploadChange"
        :accept='accept?accept:"image/*"'
        :name='name?name:"img"'
        :data='data?data:{}'
        :list-type='listType?listType:"picture-card"'
        :on-remove='remove'
        :class="{disBtn:noneBtnDel}"
        :disabled='disabled'
        :auto-upload="autoUpload"
        ref="refUpload"
        :before-upload='beforeUpload'
        :http-request='httpRequest'
        :sefelfs='sefelfs'
        :on-progress='onSuccess'
        >
        <el-button size="small" :disabled='disabled' :type="btnType?btnType:'primary'" :plain='plain' v-if='isBtn'>{{value?value:"点击上传"}}</el-button>
        <div slot="file" slot-scope="{file}" style="height:100%;width:100%;" v-if='!listType'>
            <img
                class="el-upload-list__item-thumbnail"
                :src="file.url" alt=""
                style="height:100%;width:100%;"
            />
            <span class="el-upload-list__item-actions">
                <span
                    v-if="showPictureCard"
                    class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                    >
                    <i class="el-icon-zoom-in"></i>
                </span>
                <span
                    class="el-upload-list__item-delete"
                        @click="handleRemove(file)"
                    >
                    <i class="el-icon-delete"></i>
                </span>
            </span>
        </div>
    </el-upload>
</template>

<script>
// import { getAdminToken, getAdminUserId } from '@/utils/auth'
import {dataURLtoFile} from '@/utils/64batatoFile'
import request from '@/utils/request'
export default {
    props:{
        // ['action','accept',"name","data",'fileList','value',"btnType",'plain','listType','isBtn']
        action:{
            type:String,
            default:'',
        },
        accept:{
            type:String,
            default:'',
        },
        name:{
            type:String,
            default:'',
        },
        data:{
            type:Object,
            default:()=>({}),
        },
        fileList:{
            type:Array,
            default:()=>[],
        },
        value:{
            type:String,
            default:'',
        },
        btnType:{
            type:String,
            default:'',
        },
        plain:{
            type:Boolean,
            default:true,
        },
        listType:{
            type:String,
            default:'',
        },
        isBtn:{
            type:Boolean,
            default:true,
        },
        disabled:{
            type:Boolean,
            default:false,
        },
        autoUpload:{
            type:Boolean,
            default:false,
        },
        sefelfs:{
            type:String,
            default:'',
        },
        showPictureCard:{
            type:Boolean,
            default:true,
        },
        limit:{
            type:Number,
            default:1,
        }
    },
    data(){
        return {
            baseUrl:process.env.NODE_ENV === 'development' ? process.env.VUE_APP_BASE_API :window.location.href.slice(0, window.location.href.indexOf('/user')),
            // headers:{
            //     AdminToken:getAdminToken(),
            //     AdminUserId:getAdminUserId()
            // },
            noneBtnDel:false,
            // limit:1,
            file:{},
            autoUploadA:true,
            isYes:true,
            isShow:true,
            isFileCoWu:{},//处理过的图片
        }
    },
    created(){
        this.noneBtnDel=this.fileList.length >=this.limit
        // if(this.accept.indexOf('image')==-1) {
        //     this.isYes=false
        // }else{
        //     this.isYes=true
        // }
    },
    watch:{
       fileList(val){
           this.noneBtnDel=val.length >=this.limit
       },
    },
    methods:{
        uploadChange(file, fileList){
            this.noneBtnDel=fileList.length >=this.limit
            // if(this.accept&&this.accept.indexOf('image')==-1){
            //     this.$emit('change',file,fileList)
            // }else{
            //      console.log(file)
            // }
                this.$emit('change',file,fileList)
                if(!this.sefelfs){
                    this.$refs.refUpload.submit()
                }
        },
        onSuccess(res){
            this.$emit('onSuccess',res)
        },
        remove(file, fileList){
            this.noneBtnDel=fileList.length >=this.limit
            this.$emit('remove',file,fileList)
        },
       async commitUpload(){
            if(!this.autoUpload){
                if(this.$refs.refUpload.uploadFiles.length<=0){
                   this.$toast.fail('请上传文件后提交')
                }else{
                    this.$refs.refUpload.submit()
                    // if(this.$refs.refUpload.uploadFiles[0].status=='success'){
                    //     this.$message.warning(this.$refs.refUpload.uploadFiles[0].response.msg)
                    // }
                }
            }
        },
        //主动提交
        uploadImg(file){
            this.isFileCoWu= file
            this.$refs.refUpload.submit()
        },
        handleRemove(){
            this.noneBtnDel=false
            this.$emit('remove')
            this.$refs.refUpload.clearFiles()
            // this.isShow=false
            // this.$nextTick(()=>{
            //     this.isShow=true
            // })
        },
        httpRequest(param){
            let formData = new FormData
            Object.keys(param.data).map(item=>{
                formData.append(item,param.data[item])
            })
            if(this.accept&&this.accept.indexOf('image')==-1){
                formData.append(param.filename,param.file)
                 request(
                        {
                            url:this.action,
                            method:'post',
                            data: formData
                        }
                    ).then(res=>{
                        let file = {
                            status:'success',
                            raw:param.file,
                            response:res,
                        }
                        let fileList = [file]
                        this.$emit('change',file,fileList)
                    }).catch(()=>{
                        let file = {
                            status:'success',
                            raw:param.file,
                            response:{
                                code:400,
                                data:null,
                                msg:'上传失败'
                            },
                        }
                        let fileList = [file]
                        this.$emit('change',file,fileList)
                    })
            }else{
                let objb
                if(this.isFileCoWu.size){
                    objb = this.isFileCoWu
                }else{
                    objb = param.file
                }
                this.$lrz(objb).then(res=>{
                    let obj = dataURLtoFile(res.base64,param.file.name,param.file.type)
                    // let list = [obj]
                    formData.append(param.filename,obj)
                    request(
                        {
                            url:this.action,
                            method:'post',
                            data: formData
                        }
                    ).then(res=>{
                        let file = {
                            status:'success',
                            raw:obj,
                            response:res,
                        }
                        let fileList = [file]
                        this.$emit('change',file,fileList)
                    }).catch(()=>{
                        let file = {
                            status:'success',
                            raw:obj,
                            response:{
                                code:400,
                                data:null,
                                msg:'上传失败'
                            },
                        }
                        let fileList = [file]
                        this.$emit('change',file,fileList)
                    })
                })
            }
        },
        clearFiles(){
            this.$refs.refUpload.clearFiles()
        },
        beforeUpload(file){
            this.$emit('beforeUpload',file)
            // if(this.accept&&this.accept.indexOf('image')==-1){
            //     console.log(125454)
            // }else{
            //     this.$lrz(file).then(res=>{
            //         // console.log(dataURLtoFile(res.base64,file.name,file.raw.type))
            //         return new Promise((resolve,reject)=>{
            //             // this.$emit('beforeUpload',dataURLtoFile(res.base64,file.name,file.raw.type))
            //             console.log(12111,dataURLtoFile(res.base64,file.name,file.type))
            //             resolve(dataURLtoFile(res.base64,file.name,file.type))
            //         })
            //     })
            // }
            
        },
        //编辑
        handlePictureCardPreview(file){
            this.$emit('PictureCard',file)
        }
    }
}
</script>

<style lang="scss">
    .disBtn .el-upload--picture-card {
        display: none !important;
    }
</style>